import { useState } from "react"

function MyComponents() {
  const [foods,setFoods]=useState(["apple","banana","orange"])
  /**
 * 添加食物到食物列表
 * 此函数从HTML输入元素中获取食物名称，并将其添加到食物数组中
 * 通过这种方式，用户输入的食物被动态地添加到应用的食物列表中
 */
function addFoods(){
  // 获取输入框中食物的名称
  const inputFood=document.getElementById("inputFood").value
  document.getElementById("inputFood").value=''
  // 将新食物添加到现有食物列表中
  setFoods(foods=>[...foods,inputFood])
}
function remove(index){
  // 过滤索引和index相同的值
  setFoods(foods=>foods.filter((item,i)=>i!==index))
}
  return(
    <div>
      <ul>
        {foods.map((item,index)=><li key={item}>{item}  <button onClick={()=>remove(index)}>删除</button></li>)}
      </ul>
      <input type="text" placeholder="请输入添加内容" id="inputFood"/><br /><br />
      <button type="button" onClick={addFoods}>确认添加</button>
    </div>
  )
}
export default MyComponents